
import { useEffect, useState } from "react";
import { ArticleModelState, IRouteComponentProps, useDispatch, useSelector } from "umi";
import styles from './index.less'
import './index.less'
import styless from '@/utils/markdown/index.less'
import classNames from "classnames";
import ImageViewer from "@/components/ImageViewer";
// import StickyCardRead from '@/components/stickyCardRead'
import { Anchor } from 'antd';
import Recommendread from "@/components/essay/recommendread"
import { CommentOutlined, HeartOutlined, ShareAltOutlined } from "@ant-design/icons";
import Popup from '@/components/Popup'

const ArticleDetail: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
    const id = match.params.id;
    // 通过useSelector获取model数据
    const { articleDetail } = useSelector((state: { article: ArticleModelState }) => state.article);
    // 通过useDispatch获取dispatch
    const dispatch = useDispatch();
    console.log(articleDetail, "55555");

    const { Link } = Anchor;

    const handleAnchorClick = (e: { preventDefault: () => void; }, link: any) => {
        e.preventDefault();
    };

    useEffect(() => {
        dispatch({
            type: 'article/getArticleDetail',
            payload: id
        })
    }, []);


    // 时间
    function newtime(time: string) {
        let times = time?.substring(0, 10)
        let times1 = time?.substring(11, 19)
        return times + " " + times1
    }
    let floor = JSON.parse(localStorage.getItem('Floor') as string) || []

    console.log(floor);

    return <div className={classNames(styles.details)}>
        {/* totalAmount */}
        <ImageViewer>
            {
                articleDetail.totalAmount ? <div className={styles.payment}>
                    <div>
                        <div className={styles.headerPayment}>
                            <span>确认以下收费信息</span>
                            <span onClick={() => {
                                history.go(-1)
                            }}>x</span>
                        </div>
                        <div className={styles.mainPayment}>
                            支付 金额：￥{articleDetail.totalAmount}
                        </div>
                        <div className={styles.footerPayment}>
                            <button onClick={() => {
                                history.go(-1)
                            }}>取消</button>
                            <button onClick={() => {
                                console.log(123);
                                dispatch({
                                    type: 'article/getAlipay',
                                    payload: {
                                        id: id,
                                        totalAmount: articleDetail.totalAmount
                                    }
                                })
                            }}>立即支付</button>
                        </div>
                    </div>
                </div> : null
            }
            <div className={styles.main}>
                <div className={styles.articles}>
                    <div className={styles.left}>
                        <div className={styles.Share}>
                            <div><HeartOutlined /></div>
                            <div><CommentOutlined /></div>
                            <Popup ProputItem={articleDetail}></Popup>
                            <div><ShareAltOutlined /></div>
                        </div>
                        <img src={articleDetail.cover} alt="" />
                        <div className={styles.detailsNav}>
                            <h1>{articleDetail.title}</h1>
                            <p><span>发布于{newtime(articleDetail.publishAt as string)}</span><span className={styles.dian}> · </span><span>阅读量 {articleDetail.views}</span> </p>
                        </div>
                        <div className={styless.markdown} dangerouslySetInnerHTML={{ __html: articleDetail.html! }}></div>
                        <div className={styles.Publish}>
                            <div>
                                <span>发布于{newtime(articleDetail.publishAt as string)}</span> <span>版权信息: 非商用-署名-自由转载</span>
                            </div>
                        </div>
                    </div>
                    <div className={styles.right}>
                        <div className={styles.titles}>
                            <div className={styles.recommend}>
                                {/* 推荐阅读 */}
                                <Recommendread />
                            </div>
                            <div className={styles.tag}>
                                <header className={styles.Directory}>目录</header>
                                <main className={styles.textmain}>
                                    <div className={styles.scrollbar} >
                                        <div className={styles.scrollbar2}>
                                            {/* 楼层 */}
                                            <Anchor onClick={handleAnchorClick} offsetTop={10} affix={false} style={{ height: "auto" }}>
                                                {
                                                    floor.map((item: any) => {
                                                        return <div key={item.id}>
                                                            <div>
                                                                <Link className={classNames(`h${item.level}`, styles.FloorBright)} href={`#${item.id}`} title={item.text}></Link >
                                                            </div>
                                                        </div>
                                                    })
                                                }
                                            </Anchor>
                                        </div>
                                    </div>
                                </main>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ImageViewer>
    </div>
}

export default ArticleDetail;